<template>
    <div class="ServiceListDetails">
        <div class="bottom-news-all">
            <div class="bottom-news" v-for="item in tasksList" :key="item.id">
                <div class="image-news">
                    <img :src="thumbnail" alt="" />
                </div>
                <div class="title-news">
                    <span>{{ item.serviceName || '--' }}</span>
                    <span>{{ item.address || '--' }}</span>
                </div>
                <div class="title-time">
                    <span>预约时间：{{ item.appointmentTime || '--' }}</span>
                    <span>订单编号：{{ item.version || '--' }}</span>
                </div>
                <div class="quantity-news">
                    <span v-for="spec in JSON.parse(item.serviceDetail).selections" :key="spec.id">
                        {{ spec.selection || '--' }}
                    </span>
                </div>
                <div class="money-news">
                    <span>￥{{ item.salary || '--' }}</span>
                </div>
                <div class="grab-orders" @click="doTask(item)">抢单</div>
            </div>
        </div>
    </div>
    <ElPagination
        class="mt20"
        @currentChange="handleCurrentChange"
        :pageSize="getListParams.size"
        layout="total, prev, pager, next"
        :total="total"
    ></ElPagination>
</template>

<script lang="ts" setup>
import {
    reactive, ExtractPropTypes, ref, Ref,
} from 'vue';
import { Service } from '@/types/service.d';
import { ElMessage } from 'element-plus';
import { debounce } from '@/utils/utils';
import { getpagedoTask, getOrdersList, getpageQueryTasks } from '@/api/api.query.util';
import PubSub from 'pubsub-js';

const tasksList: Ref<Array> = ref([]);
const total: Ref<number> = ref(0);
const getListParams = reactive({
    current: 1,
    size: 10,
});
// 得到任务接口
getTasks();
function getTasks() {
    getpageQueryTasks({
        method: 'POST',
        data: getListParams,
    }).then((res) => {
        tasksList.value = res.result.records || [];
        total.value = res.result.total;
    });
}
function doTask(item) {
    debounce(() => {
        getpagedoTask({
            method: 'POST',
            data: reactive({
                action: 'accept',
                id: item.id,
                employeePhone: '13823616893',
            }),
        }).then((res) => {
            ElMessage({
                message: '抢单成功',
                type: 'success',
            });
            PubSub.publish('initCount');
            getTasks();
        });
    }, 500);
}
function handleCurrentChange(current: number) {
    getListParams.current = current;
    getTasks();
}
const thumbnail = require('@/assets/image/taylor-sondgeroth-ltsKOg_q_Gc-unsplash@2x.png');
</script>

<style lang="scss" scoped>
.ServiceListDetails {
    background-color: var(--section-color);
    padding: 0 20px;
}
.bottom-news-all {
    border-bottom: 1px solid var(--bg-default);
}
.bottom-news {
    display: flex;
    padding: 20px 20px;
    border-bottom: 1px solid #ebebeb;
    &:nth-last-child(1) {
        border-bottom: 0;
    }
    .image-news {
        border-radius: 4px;
        margin-right: 15px;
        img {
            width: 36px;
            height: 36px;
        }
    }
    .title-news {
        display: flex;
        flex-direction: column;
        margin-right: 50px;
    }
    .title-news > span {
        height: 25px;
        width: 250px;
        font-size: 12px;
        letter-spacing: 0px;
        color: #333333;
        &:nth-child(1) {
            color: var(--btn_primary);
        }
    }
    .title-time {
        display: flex;
        flex-direction: column;
        width: 350px;
    }
    .title-time > span {
        height: 25px;
        font-size: 12px;
        letter-spacing: 0px;
        color: #333333;
    }
    .quantity-news {
        width: 150px;
        line-height: 37px;
        span {
            width: 42px;
            height: 16px;
            border-radius: 4px;
            border: solid 1px var(--btn_primary);
            font-size: 12px;
            line-height: 18px;
            color: var(--btn_primary);
            padding: 0 6px;
            margin-right: 5px;
        }
    }
    .money-news {
        width: 100px;
        line-height: 37px;
        span {
            font-size: 18px;
            color: #c7000b;
        }
    }
    .grab-orders {
        width: 72px;
        height: 28px;
        line-height: 28px;
        margin-top: 5px;
        background-color: #3ab0a2;
        border-radius: 4px;
        text-align: center;
        color: var(--bg-default);
        cursor: pointer;
    }
}
</style>
